<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <span>商品分类</span>
        <el-button type="primary">添加分类</el-button>
      </div>
      <div class="content">
        <!-- 表格 -->
        <el-table :data="tableData" :style="{ width: w + 'px' }">
          <!-- 序号 -->
          <el-table-column label="序号" type="index"></el-table-column>
          <!-- 分类名称 -->
          <el-table-column label="分类名称">
            <template slot-scope="scope">
              <el-input v-if="scope.row.canEdit" v-model="scope.row.cateName"></el-input>
              <span v-else>{{ scope.row.cateName }}</span>
            </template>
          </el-table-column>
          <!-- 是否启用 -->
          <el-table-column label="是否启用" prop="state">
            <template slot-scope="scope">
              <el-switch :disabled="scope.row.canEdit ? false : true" v-model="scope.row.state" active-color="#13ce66" inactive-color="#cccccc"> </el-switch>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" :type="scope.row.canEdit ? 'success' : 'primary'" size="small">{{ scope.row.canEdit ? '完成' : '编辑' }}</el-button>
              <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next,jumper" :total="total" :current-page="currentPage" :page-size="pageSize"> </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getGoodsCate, updateGoodsCate } from '@/api/goods'
export default {
  data() {
    return {
      // 表格动态样式
      w: document.body.clientWidth - 300,
      tableData: [],
      currentPage: 1,
      pageSize: 7,
      total: 0
    }
  },
  methods: {
    resize() {
      this.w = document.body.clientWidth - 300
    },
    // 编辑
    async handleEdit(row) {
      console.log(row)
      row.canEdit = !row.canEdit
      // 点击完成才开始发送请求
      if (!row.canEdit) {
        let res = await updateGoodsCate({
          id: row.id,
          cateName: row.cateName,
          state: row.state ? 1 : 0
        })
        console.log(res.data)
      }
    },
    // 删除
    handleDelete(row) {
      console.log(row)
    },
    // 获取数据
    async getData() {
      let res = await getGoodsCate({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      let { total, data } = res.data

      // 处理数据格式
      data.forEach(v => {
        v.state = v.state == 1 ? true : false
        v.canEdit = false //每一行数据添加一个是否能独立编辑
      })
      this.total = total
      this.tableData = data
    },
    // 改编页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    }
  },
  created() {
    window.addEventListener('resize', this.resize)
    this.getData()
  },
  beforeDestroy() {
    // 组件销毁前移除监听
    window.removeEventListener('resize', this.resize)
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>
